import React from 'react';
import { WhiteSpace, WingBlank, List, SearchBar, Button } from 'antd-mobile';
import moment from 'moment';
import MyIcon from '../../components/Base/MyIcon';
import _ from 'lodash';
import styles from './vipShopShow.less'
class VipShopShow extends React.Component {

  state = {
    currentListNum: 5,
    value: 'food'
  }

  getDateString = (birthday) => {
    if (birthday) {
      return moment(birthday).utc(true).subtract(8, 'hours').format('YYYY-MM-DD  HH:mm');
    }
    return '';
  };

  changeData = (vipConsume) => {
    const aa = [];
    const bb = _.orderBy(vipConsume, ['oper_date'], ['desc']);
    let oper_date = '';

    for (let i = 0; i < bb.length; i++) {
      if (bb[i].oper_date !== oper_date) {
        oper_date = bb[i].oper_date;
        aa[aa.length] = [];
      }
      aa[aa.length - 1].push(bb[i]);
    }

    return aa;
  }

  getShopNum = (vipItem) => {
    let num = 0;
    vipItem.forEach((item) => {
      num += item.sale_qnty;
    });
    return num;
  }

  getShopMoney = (arrShop) => {
    let money = 0;
    arrShop.forEach((item) => {
      money += item.sale_money;
    });

    return money;
  }

  nextPage = () => {
    this.setState({
      currentListNum: this.state.currentListNum + 5,
    });
  }

  /* 搜索框 */
  handleSearch = (value) => {
    // console.log(value, 'onChange');
    this.setState({ value });
    console.log(value)
  };

  clear = () => {
    this.setState({ value: '' });
  };

  goodsItem = (item) => {
     let arr = []
     for (let i=0; i<item.length; i++) {
       arr.push(
        <div className={styles.showItem} key={item[i]._id}>
          <div className={styles.itemLeft}>
            <img src={require('../../assets/new/consume.png')} alt='img'/>
          </div>
          <div className={styles.itemRight}>
            <div className={styles.brand}>{item[i].branch_name}</div>
            <div className={styles.seondWarp}>
              <div className={styles.goodsDes}>{item[i].item_name}</div>
              <div className={styles.price}>￥{Number(item[i].sale_price).toFixed(2)}</div>
            </div>
            <div className={styles.specWrap}>
                <div className={styles.spec}>规格：6.5ml   402草莓红</div>
                <div className={styles.num}>x{item[i].sale_qnty}</div>
            </div>
          </div>
        </div>
       )
     }

     return arr
  }

  /* 主体内容 */
  showShopBody = (goods) => {
    const vipConsume = this.props.vipConsume || [];
      let arr = []
      {
        for (let i=0; i<goods.length; i++) {
         arr.push(
          <div className={styles.showItemWrap} key={i}>
              {/* title */}
              <div className={styles.titleWrap}>
                <div>{goods[i].branch_name}</div>
                <div className={styles.time}>{moment(goods[i].oper_date).format('YYYY-MM-DD  HH:mm')}</div>
              </div>

              {/* //item */}
              {this.goodsItem(vipConsume)}
              {/* //item */}
            </div>)}
      }
      return arr
  }
  render() {
    const vipConsume = this.props.vipConsume;
    const { currentListNum } = this.state;
    const vip = this.changeData(vipConsume);
    
    console.log('消费记录',vipConsume)
    return (
     
      <div className={styles['consumeWrap']}>
{/*         <div className={styles.btn}>
          <SearchBar 
          className={styles.searchBtn}
          style={{padding: '0 .277778rem'}}
          placeholder="搜索品牌或者商品名称"
          onChange={this.handleSearch}
          />
        </div> */}
        
        {/*  oldbody */}
        {/* <div className={styles.shopBody}>
           {this.showShopBody(vipConsume)}
        </div> */}

        <div className={styles['top_record']}>
           <div>最近消费记录</div>
           <div className={styles['top_count']}>共<span >{vipConsume.length}</span>条</div>
        </div>

        <div className={styles['container']}>
          
           {vipConsume.map( v => (
             <div className={styles['c_item']}>
             <div className={styles['item_top']}>
               <div className={styles['top_date']}>
                 <span>{moment(v.oper_date).format('YYYY-MM-DD  HH:mm')}</span>
                 <span>{v.branch_name}</span>
               </div>
               <div className={styles['order']}>订单号：{v.flow_no}</div>
               <div>小票号：{v.item_no}</div>
             </div>

             <div className={styles['item_middle']}>
               <div className={styles['m_item']}>
                 <div className={styles['m_item_title_price']}>
                   <span className={styles['title']}>{v.item_name}</span>
                   <span>¥{v.sale_price}</span>
                 </div>
                 <div className={styles['m_item_spec_count']}>
                   <span className={styles['spec']}>规格：{v.item_name} </span>
                   <span>×{v.sale_qnty}</span>
                 </div>
               </div>
             </div>

             <div className={styles['item_bottom']}>
                共{v.sale_qnty}件商品合计：<span>¥{v.sale_price}</span>
             </div>
          </div>

           ))}
        </div>
      </div>
    );
  }
}

export default VipShopShow;

